<template>
  <div class="simple-system-container">
    <div class="container">
      <!-- 头部信息 -->
      <div class="header-info">{{ currentTime }}</div>

      <!-- 系统标题 -->
      <h1 class="system-title">包车信息管理系统</h1>
      <!--      <p class="system-subtitle">专业运输企业解决方案</p>-->

      <!-- 用户信息区域 -->
      <div class="user-info-section">
        <div class="user-info-grid">
          <div class="user-info-item"><strong>昵称：</strong>{{ userInfo.name }}</div>
          <div class="user-info-item"><strong>身份：</strong>{{ userInfo.userName === 'admin' ? '超级管理' : '普通用户' }}</div>
          <div class="user-info-item"><strong>IP：</strong>{{ userInfo.loginIp }}</div>
          <div class="user-info-item"><strong>时间：</strong>{{ userInfo.time }}</div>
        </div>
      </div>

      <!-- 系统介绍 -->
      <div class="system-intro">
        <p>{{ dailyMessage }}</p>
        <p>专为运输企业打造的全方位管理平台，集成核心功能模块，提供专业的运输解决方案。系统支持运输企业客运包车驾驶员信息备案、包车标志牌电子化管理以及跨区域运输信息快速核验，提升企业运营效率和管理水平。</p>

        <div class="feature-list">
          <div class="feature-item">电子二维码生成</div>
          <div class="feature-item">驾驶员资料管理</div>
          <div class="feature-item">用户登录管理</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleInfoSystem',
  data() {
    return {
      // 模拟数据，实际项目中从API或store获取
      currentTime: '2025-09-09 23:07:47 星期二 第三季度',
      userInfo: {
        name: '系统管理员',
        userName: 'admin',
        loginIp: '192.168.1.1',
        time: '2025-09-09 23:05:47'
      },
      dailyMessage: '欢迎使用包车信息管理系统，祝您工作顺利！'
    };
  },
  methods: {
    // 可以添加需要的方法
  }
};
</script>

<style scoped lang="scss">
// 颜色变量定义
$primary: #165DFF;
$success: #4CAF50;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$border-radius: 12px;
$shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
$shadow-md: 0 2px 12px rgba(0,0,0,0.04);

.simple-system-container {
  background-color: #F7F8FA;
  min-height: 100vh;
  padding: 20px;
  color: $text-primary;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: $bg-white;
  padding: 60px;
  border-radius: $border-radius;
  box-shadow: $shadow-md;
}

.header-info {
  margin-bottom: 30px;
  font-size: 14px;
  color: $text-tertiary;
}

.system-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 15px;
  color: $text-primary;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.system-subtitle {
  font-size: 16px;
  color: $text-secondary;
  margin-bottom: 30px;
}

.user-info-section {
  background-color: $bg-light;
  padding: 25px;
  border-radius: $border-radius;
  margin-bottom: 35px;
  box-shadow: $shadow-sm;
}

.user-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.user-info-item {
  font-size: 15px;

  strong {
    display: inline-block;
    width: 80px;
    color: $text-primary;
  }
}

.system-intro {
  line-height: 1.8;

  p {
    margin-bottom: 18px;
    font-size: 15px;
    color: $text-secondary;
  }
}

.feature-list {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.feature-item {
  flex: 0 0 calc(33.333% - 14px);
  background: $bg-white;
  padding: 18px;
  border-radius: 8px;
  box-shadow: $shadow-sm;
  transition: all 0.3s ease;
  font-size: 15px;
  text-align: center;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .container {
    padding: 40px 20px;
  }

  .user-info-grid {
    grid-template-columns: 1fr;
  }

  .system-title {
    font-size: 28px;
  }

  .feature-item {
    flex: 0 0 100%;
  }

  .simple-system-container {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .user-info-item {
    font-size: 14px;
  }

  .system-intro p {
    font-size: 14px;
  }

  .feature-item {
    padding: 15px;
    font-size: 14px;
  }
}
</style>
